<template>
  <transition name="slide-fade">
    <div class="the-aside" v-if="showAside">
      <h2 class="title">播放列表</h2>
      <ul class="menus">
        <li v-for="(item,index) in listOfSongs" :key="index" :class="{'is-play': id == item.id}" @click="toplay(item.id,item.url,item.pic,item.index,item.name,item.lyric)">
          {{replaceFName(item.name)}}
        </li>
      </ul>
    </div>
  </transition>
</template>

<script>
import {mapGetters} from 'vuex'
import {getCollectOfUserId} from "../api";
export default {
  name: "TheAside",
  computed:{
    ...mapGetters([
      'showAside'  ,          //是否显示播放中的歌曲列表
      'listOfSongs'  ,         //当前歌曲列表
      'id' ,                  //播放中的音乐id
      'loginIn',               //判断用户是否登录
      'userId'  ,               //当前用户登录的id
      'isActive',               //当前播放的歌曲是否已经收藏
    ])
  },
  mounted() {
    let _this=this;
    document.addEventListener('click',function () {
      _this.$store.commit('setShowAside',false)
    },true)
  },
  methods:{
    //播放
    toplay:function (id,url,pic,index,name,lyric) {
      this.$store.commit('setId',id)
      this.$store.commit('setUrl',this.$store.state.configure.HOST+url)
      this.$store.commit('setPicUrl',this.$store.state.configure.HOST+pic)
      this.$store.commit('setListIndex',index)
      this.$store.commit('setTitle',this.replaceFName(name))
      this.$store.commit('setArtist',this.replaceLName(name))
      this.$store.commit('setLyric',this.parseLyric(lyric))
      this.$store.commit('setIsActive',false);
      if(this.loginIn){
        getCollectOfUserId(this.userId)
            .then(res =>{
              for(let item of res){
                if(item.songId == id){
                  this.$store.commit('setIsActive',true);
                  break;
                }
              }
            })
      }
    },
    //解析歌词
    parseLyric(text){
      let lines = text.split("\n");                   //将歌词按行分解成数组
      let pattern = /\[\d{2}:\d{2}.(\d{3}|\d{2})\]/g; //时间格式的正则表达式
      let result = [];                                //返回值
      //对于歌词格式不对的直接返回
      if(!(/\[.+\]/.test(text))){
        return [[0,text]]
      }
      //去掉前面格式不正确的行
      while(!pattern.test(lines[0])){
        lines = lines.slice(1);
      }
      //遍历每一行，形成一个每行带着俩元素的数组，第一个元素是以秒为计算单位的时间，第二个元素是歌词
      for(let item of lines){
        let time = item.match(pattern);  //存前面的时间段
        let value = item.replace(pattern,'');//存后面的歌词
        for(let item1 of time){
          let t = item1.slice(1,-1).split(":");   //取出时间，换算成数组
          if(value!=''){
            result.push([parseInt(t[0],10)*60 + parseFloat(t[1]),value]);
          }
        }
      }
      //按照第一个元素--时间--排序
      result.sort(function(a,b){
        return a[0] - b[0];
      });
      return result;
    },

  }
}
</script>

<style scoped>

slide-fade-enter-active {
  transition: all .3s ease;
}

slide-fade-leave-active {
  transition: all .2s ease;
}

slide-fade-enter, slide-fade-leave-to {
  transform: translateX(10px);
  opacity: 0;
}

.the-aside {
  font-size: 14px;
  width: 250px;
  height: 370px;
  position: fixed;
  right: 0;
  top: 150px;
  z-index: 99;
  background-color: white;
  -webkit-box-shadow:1px 1px 10px rgba(0, 0, 0, 0.4);
  -moz-box-shadow:1px 1px 10px rgba(0, 0, 0, 0.4);
  box-shadow:1px 1px 10px rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(0, 0, 0, 0.5);
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  overflow: hidden;
}

.title {
  padding-left: 20px;
  margin: 10px 0;
  box-sizing: border-box;
}
.menus {
  background-color: white;
  width: 100%;
  height: calc(100% - 19px);
  cursor: pointer;
  z-index: 100;
  overflow: scroll;
  white-space: nowrap;
}
.menus li{
  display: block;
  width: 100%;
  height: 40px;
  line-height: 40px;
  padding-left: 20px;
  box-sizing: border-box;
  border-bottom: solid 1px rgba(0, 0, 0, 0.2);
}
.menus li:hover{
  background-color: #95d2f6;
  color: white;
}
.is-play{
  font-weight: bold;
  background-color: #FFC0CB;
}

</style>
